import { Text, View } from "@tarojs/components";
import { ReactNode } from "react";

type ByCellProps = {
  id?: string;
  title?: string;
  className?: string;

  innerPadding?: boolean

  children?: ReactNode;
  slotRight?: ReactNode;
};

export default ({ id, title, className, innerPadding, children, slotRight }: ByCellProps) => {
  return (
    <View className={className} id={id}>
      {(title || slotRight) && (
        <View className={`flex justify-between mb-2`}>
          <Text className="text-second">{title}</Text>

          <View className="text-right">{slotRight}</View>
        </View>
      )}

      <View className={`bg-white rounded-xl px-3 shadow-black-1 ${innerPadding ? 'py-3' : ''}`}>
        {children}
      </View>
    </View>
  );
};
